<template>
  <div class="container loginMsg" :style="{'background':themeColor}" :class="$store.state.app.collapse?'menu-bar-collapse-width':'menu-bar-width'">
    <!-- 导航收缩 -->
    <span class="hamburger-container" :style="{'background':themeColor}">
      <hamburger :onClick="onCollapse" :isActive="collapse"></hamburger>
    </span>
    <!-- 导航菜单 -->
    <span class="nav-bar">
      <el-menu :default-active="$route.path" class="el-menu-demo"
          :background-color="themeColor" text-color="#fff" active-text-color="#ffd04b" mode="horizontal" @select="selectNavBar()">
        <el-menu-item :index="$route.path" @click="$router.push('/')"><i class="fa fa-home fa-lg"></i>  </el-menu-item>
      </el-menu>
    </span>
    <span class="tool-bar">
      <!-- 消息条数提醒 -->
      <!-- <el-badge :value="1" :max="99" class="badge" type="success">
            <li style="color:#fff;" class="fa fa-bell-o fa-lg fa-2x"></li>
      </el-badge> -->
        
      <!-- 主题切换 -->
      <theme-picker class="theme-picker" :default="themeColor" @onThemeChange="onThemeChange"></theme-picker>
      <!-- 语言切换 -->
      <!--<lang-selector class="lang-selector"></lang-selector>-->
      <!-- 用户信息 -->
      <el-dropdown class="user-info-dropdown" trigger="hover" @command="handleCommand">
        <!-- <span class="el-dropdown-link"><img :src="this.userAvatar" /> {{userName}}</span> -->
        <span class="el-dropdown-link"> {{userName}}</span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="msg" @click.native="myMssges">{{$t("common.myMsg")}}</el-dropdown-item>
          <!--<el-dropdown-item command="config">{{$t("common.config")}}</el-dropdown-item>-->
          <el-dropdown-item @click.native="openModifyPass">修改密码</el-dropdown-item>
          <el-dropdown-item @click.native="openSubscribe">订阅消息</el-dropdown-item>
          
          <el-dropdown-item divided @click.native="logout">{{$t("common.logout")}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </span>
    <!--备份还原界面-->
    <!-- <backup ref="backup" v-if="backupVisible" @afterRestore="afterRestore">  </backup> -->
    <!-- 修改密码弹窗 -->
     <el-dialog
      title="修改密码"
      width="40%"
      :visible.sync="modifyPass"
      :close-on-click-modal="false"
    >
    <el-row>
      <!-- <el-col :span="24">
        <el-row>
          <el-col :span="6">用户名</el-col>
          <el-col :span="16" style="text-align: left;">
             <span>{{userName}}</span>
          </el-col>
        </el-row>
      </el-col> -->
       <el-col :span="24">
        <el-row>
          <el-col :span="6">新密码</el-col>
          <el-col :span="16">
           <el-input placeholder="请输入密码" type="password" v-model="password"></el-input>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24">
        <el-row>
          <el-col :span="6">确认密码</el-col>
          <el-col :span="16">
          <el-input placeholder="确认密码" type="password" v-model="repassword"></el-input>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <div class="btn-cont">
      <el-button @click="modifyPass = false">取 消</el-button>
      <el-button type="primary" style="margin-left:50px" @click="submitModifyPass">确 定</el-button>
    </div>
    </el-dialog>
    <!-- 订阅消息弹窗 -->
    <el-dialog  :visible.sync="isShowSubscribe"
    class="demo2"
      :close-on-click-modal="false" width="20%" title="订阅消息">
        <el-row>
          <el-col :span="16">是否订阅消息？</el-col>
          <el-col :span="6">
            <el-switch
              class="demo" 
              active-text="是"
              inactive-text="否" 
              v-model="subscribe"
              @change="changeSwitch()"  
              :active-value='1' :inactive-value='2'
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
          </el-col>
        </el-row>
  
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import mock from "@/mock/index"
import Hamburger from "@/components/Hamburger"
import ThemePicker from "@/components/ThemePicker"
import LangSelector from "@/components/LangSelector"
import Backup from "@/views/Backup/Backup"
import Cookies from "js-cookie";
export default {
  components:{
        Hamburger,
        ThemePicker,
        LangSelector,
        Backup
  },
  data() {
    return {
      userName:Cookies.get("webuser"),
      userAvatar: "",
      activeIndex: '1',
      backupVisible: false,
      modifyPass:false,
      password:'',
      isShowSubscribe:false,
      repassword:'',
      subscribe:true
    }
  },
  methods: {
    //我的消息
    myMssges:function () {
      this.$router.push("/MessageManagement/PublicMessage")
    },
    openWindow(url) {
      window.open(url)
    },
    selectNavBar(key, keyPath) {
      console.log(key, keyPath)
    },
    // 折叠导航栏
    onCollapse: function() {
      this.$store.commit('onCollapse')
    },
    // 切换主题
    onThemeChange: function(themeColor) {
      this.$store.commit('setThemeColor', themeColor)
    },
    handleCommand(command) {
      if('bakcup' === command) {
        this.handleBackup()
      }
    },
    // 打开备份还原界面
    handleBackup: function() {
      this.backupVisible = true
      this.$nextTick(() => {
          this.$refs.backup.init()
      })
    },
    // 打开修改密码弹窗
    openModifyPass: function() {
      this.modifyPass = true
    },
    // 成功还原之后，重新登录
    afterRestore: function() {
        localStorage.removeItem("webuser")
        this.$router.push("/login")
        this.$api.login.logout().then((res) => {
          }).catch(function(res) {
        })
    },
    // 提交修改密码
    submitModifyPass:function(){
        if(this.password==this.repassword){
          this.$api.person.resetPwd({
          userName:this.userName,
          password:this.password
        }).then(res=>{
          if (res.result == 2) {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              } else {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.modifyPass=false
              }
        })
      }else{
        this.$message({
          message: '两次密码输入不一致！',
          type: "error"
        });
      }
      
    },
    // 退出登录
    logout: function() {
      this.$confirm("确认退出吗?", "提示", {
        type: "warning"
      })
      .then(() => {
        Cookies.remove("webuser")
        Cookies.remove("TQtoken")
        Cookies.remove("admin_uin")
        Cookies.remove("appid")
        Cookies.remove("appkey")
        Cookies.remove("realName")
        Cookies.remove("threeLevelDeptId")
        Cookies.remove("uin")
        Cookies.remove("userId")
        Cookies.remove("tqToken")
        Cookies.remove("TQtoken_init")
        Cookies.remove("TQtoken_init")
        this.$store.dispatch("delAllViews");
        this.$router.push("/");
        this.$router.push("/login")
        localStorage.clear()
        this.$api.user.logout().then((res) => {
          }).catch(function(res) {
        })
      })
      .catch(() => {})
    },

    openSubscribe(){
      this.isShowSubscribe=true
      this.getSubscribe()
    },
    // 查询是否订阅消息
    getSubscribe(){
      this.$api.message.isSubscribe().then(res=>{
        if(res.result==1){
          this.subscribe=res.data?1:2
        }
      })
    },
    // 订阅消息
    changeSwitch(){
      this.$api.message.subscribe({issubscribe:this.subscribe}).then(res=>{
        if (res.result == 2) {
          this.$message({ message: res.msg, type: "error" });
        } else {
          this.$message({ message: res.msg, type: "success" });
        }
      })
    },
    // 查询是否需要修改密码
    checkPasswordDate(){
      const h = this.$createElement;
      this.$api.user.checkPasswordDate().then(res=>{
        if(res.data.isPop==1){
          let message = res.data.msg;
          this.$message({
            type: 'warning',
            message: h("p", null, [
                h("span", null, message),
                h(
                  "button",
                  {
                    on: {
                      click: this.editPassword
                    }
                  },
                  "点我修改"
                )
              ]),
          });
        }
      })
    },
    editPassword(){
      this.modifyPass=true
    }
  },
  mounted() {
    this.sysName = "101CRM"
    var user = Cookies.get("webuser")
    if (user) {
      this.userName = user
      this.userAvatar = require("@/assets/user.png")
    }
    this.checkPasswordDate()
  },
  computed:{
    ...mapState({
      themeColor: state=>state.app.themeColor,
      collapse: state=>state.app.collapse
    })
  }
}
</script>

<style scoped lang="scss">
.container {
  position: absolute;
  left: 200px;
  right: 0px;
  height: 60px;
  line-height: 60px;
  .hamburger-container {
    width: 40px;
    float: left;
    border-color: rgba(238, 241, 241, 0.4);
    border-left-width: 1px;
    border-left-style: solid;
    border-right-width: 1px;
    border-right-style: solid;
    color: white;
  }
  .nav-bar {
    margin-left: auto;
    float: left;
    .el-menu {
      background: #0a463480;
    }
  }
  .tool-bar {
    float: right;
    .theme-picker {
      padding-right: 10px;
    }
    .lang-selector {
      padding-right: 10px;
      font-size: 15px;
      color: #fff;
      cursor: pointer;
    }
    .user-info-dropdown {
      font-size: 20px;
      padding-right: 20px;
      color: #fff;
      cursor: pointer;
      img {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        margin: 10px 0px 10px 10px;
        float: right;
      }
    }
  }
}
.menu-bar-width {
  left: 250px;
}
.menu-bar-collapse-width {
  left: 65px;
}
.loginMsg .el-dialog__body{
  padding: 20px 20px;
}
.btn-cont{
  margin-top: 20px;
}
</style>
<style lang="scss" scoped>
.demo /deep/ .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
.demo /deep/ .el-switch__label--left {
  z-index: 9;
  left: 20px;
}
.demo /deep/ .el-switch__label--right {
  z-index: 9;
  left: -5px;
}
.demo /deep/ .el-switch__label.is-active {
  display: block;
}
.demo /deep/  .el-switch__core{
  width: 58px!important;
}
.demo /deep/{
  width: 50px;
}

</style>
<style lang="scss">
.demo2{
  .el-dialog__body{
    padding: 0 !important;
  }
}
</style>